<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <!-- 
        描述
请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 可以使用预设代码"_render"函数
       -->
  <style>
    ul {
      list-style: none;
    }
  </style>
  <ul></ul>

  <script>
    var ul = document.querySelector('ul');
    var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
    const _render = element => {
      var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`
      element.innerHTML = str;
    }
    _render(ul);
    // 补全代码
    let keys = Object.keys(person)
    for (let item of keys) {
      let key = person[item]
      Object.defineProperty(person, item, {
        set(newvalue) {
           key = newvalue
          _render(ul);
        },
        get() {
          return key
        }
      })
    }
    person.name = 'xiaoluo'
    console.log(person.name)
  </script>
</body>

</html>